<script setup>
const props = defineProps({
  modelValue: {
    type: Number,
    default: 0
  },
  max: {
    type: Number,
    default: 9999
  },
  min: {
    type: Number,
    default: 0
  },
  step: {
    type: Number,
    default: 1
  }
})

// 定义 emit
const emit = defineEmits(['update:modelValue'])

const internalValue = computed({
  get: () => props.modelValue,
  set: (value) => {
    emit('update:modelValue', value)
  }
})
</script>

<template>
  <van-stepper
    class="custom-stepper"
    input-width="13.333vw"
    inputmode="numeric"
    integer
    :min="min"
    :max="max"
    :default-value="0"
    :step="step"
    v-model="internalValue"
  />
</template>

<style scoped lang="less">
.custom-stepper ::v-deep(.van-stepper__minus),
.custom-stepper ::v-deep(.van-stepper__plus) {
  color: #36b374;
  background-color: #fff;
  border: 2px solid #36b374;
  border-radius: 1.1vw;
}
.custom-stepper ::v-deep(.van-stepper__minus.van-stepper__minus--disabled),
.custom-stepper ::v-deep(.van-stepper__plus.van-stepper__plus--disabled) {
  border: 2px solid rgba(54, 179, 116, 0.4);
  color: rgba(54, 179, 116, 0.4);
}
.custom-stepper ::v-deep(.van-stepper__input) {
  background-color: #ffffff;
}
</style>
